<script setup>
import { getMatchHistoryApi } from '@/api/client/matchApi';
import { getPlayerInfoApi } from '@/api/client/userApi'
import miniRecord from '@/components/historyRecord/miniPreview.vue'
import LcuImage from '@/components/lcuImage.vue'
import router from '@/router'
import { useClientStore } from '@/stores/client'
import { computed, ref, watch } from 'vue'
import { useI18n } from 'vue-i18n'
import RankInfo from './rankInfo.vue';
import Tags from './tags.vue';

// prop
const props = defineProps({
  data: {
    type: Object,
    default: () => ({}),
  },
  preTeams: {
    type: Array,
    default: () => ([]),
  },
})

const { t } = useI18n()

const playerInfo = ref({})
const historyMatch = ref([])

const RankInfoRef = ref(null)
const TagsRef = ref(null)

async function getPlayerInfo({ puuid }) {
  if (!puuid) {
    playerInfo.value = {}
    return
  }
  // 查询用户信息
  const player = await getPlayerInfoApi(puuid)
  playerInfo.value = player
  // 查询用户战绩(前50场)
  const history = await getMatchHistoryApi(puuid, { endIndex: 29 })
  historyMatch.value = history?.games?.games ?? []
  // 段位
  RankInfoRef.value?.getRankedStats(puuid)
  // 标签计算
  TagsRef.value?.getTags(playerInfo.value, historyMatch.value)
}

function viewPlayer() {
  if (playerInfo.value.puuid === useClientStore().userInfo.puuid) return
  router.push({ path: '/', query: { puuid: playerInfo.value.puuid } })
}

// 获取当前用户是否在预组队列表里并且是第几个
const inPre = computed(() => {
  const item = props.preTeams.find((item) => {
    return item.puuids.includes(playerInfo.value.puuid)
  })
  return item
})

// watch
watch(
  () => props.data,
  async (newVal) => {
    if (playerInfo.value.puuid === newVal.puuid) return
    playerInfo.value = { puuid: newVal.puuid }
    getPlayerInfo(newVal)
  },
  { deep: true, immediate: true },
)
</script>

<template>
  <div class="assistant_row" :style="{ 'border-color': inPre?.color?.borderColor }">
    <div class="row_info">
      <div class="info_header flex items-center">
        <!-- 头像 -->
        <div class="champion_icon w-40px h-40px rounded-full">
          <transition name="el-fade-in">
            <LcuImage :id="data.championId" width="110%" height="110%" type="champion" />
          </transition>
        </div>
        <div class="header_content ml-10px">
          <!-- ID -->
          <p class="user_name cursor-pointer select-none" @click="viewPlayer">
            <!-- 用户名：昵称#编号 -->
            <span class="text-14px">{{ playerInfo.gameName || '未知召唤师' }}</span>
            <!-- <span v-if="playerInfo.tagLine" class="text-12px ml-1 opacity-50">#{{ playerInfo.tagLine }}</span> -->
          </p>

          <div class="user_tags mt-4px flex items-center justify-between">
            <div class="text-12px">Lv.{{ playerInfo.summonerLevel }}</div>
            <RankInfo ref="RankInfoRef" />
          </div>
        </div>
      </div>
      <div class="info_tags">
        <Tags ref="TagsRef" />
        <a-tag v-if="!!inPre" size="small" :color="inPre?.color?.foregroundColor">
          {{ t(`UserInfo.tags.preTeam`, { count: inPre?.code }) }}
        </a-tag>
      </div>
    </div>
    <div class="row_list relative">
      <div class="row_matchs h-full w-full overflow-auto absolute">
        <div v-for="item in historyMatch" :key="item.gameId" class="row_match">
          <mini-record :data="item" />
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.assistant_row {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 12px;
  border: 1px solid transparent;
  border-radius: 6px;
  background-color: var(--module-bg-color);
  box-shadow: var(--module-box-shadow);

  --info-header-height: 75px;

  .row_info {
    width: 100%;
    border-bottom: 1px solid #131B3A33;

    .info_header {
      height: 40px;

      .champion_icon {
        background-image: url('@/assets/images/champion_empty.png');
        background-size: 100% 100%;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      ::v-deep {
        .el-tag+.el-tag {
          margin-left: 4px;
        }
      }

      .header_content {
        width: calc(100% - 46px - 10px);
      }
    }

    .info_tags {
      height: calc(var(--info-header-height) - 40px);
      display: flex;
      align-items: center;

      ::v-deep(.arco-tag) {
        &+.arco-tag {
          margin-left: 4px;
        }
      }
    }
  }

  .row_list {
    height: 100%;
    overflow: hidden;

    // 隐藏滚动条
    * {
      scrollbar-width: none;
    }

    .row_matchs {
      .row_match {
        width: 100%;
        margin-top: 4px;
      }
    }

  }
}
</style>
